import { colors, typography } from "app/theme"
import React, { useState } from "react"
import { StyleSheet, View, Text } from "react-native"
import { Dropdown } from "react-native-element-dropdown"
import { scale } from "react-native-size-matters"

export type DropDownItemProps = {
  label: string
  value: string
}

export type DropdownProps = {
  placeholder?: string
  onChange: (data: any) => void
  search?: boolean
  searchPlaceholder?: string
  data: DropDownItemProps[]
  value?: any
  disable?: boolean
}

export const DropdownComponent = ({
  placeholder,
  onChange,
  search,
  searchPlaceholder,
  value,
  data = [],
  disable,
}: DropdownProps) => {
  // const [value, setValue] = useState(null)
  const [isFocus, setIsFocus] = useState(false)

  return (
    <View style={styles.container}>
      <Dropdown
        search={search}
        searchPlaceholder={searchPlaceholder}
        style={[
          styles.dropdown,
          isFocus && { borderColor: "black" },
          value !== null && { borderColor: colors.text },
        ]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        iconStyle={styles.iconStyle}
        data={data}
        maxHeight={300}
        labelField="label"
        valueField="value"
        fontFamily={typography.fonts.spaceGrotesk.medium}
        // @ts-ignore
        placeholder={!isFocus ? placeholder : "..."}
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={(item) => {
          // @ts-ignore
          // setValue(item.value)
          setIsFocus(false)
          onChange && onChange(item)
        }}
        renderLeftIcon={() => null}
        containerStyle={styles.containerStyle}
        itemTextStyle={styles.itemTextStyle}
        dropdownPosition="bottom"
        disable={disable ?? false}
      />
    </View>
  )
}

export const EmptyComponent = ({ title }) => {
  return (
    <View style={styles?.notFound}>
      <Text style={styles.notFoundText}>{title}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
  },
  dropdown: {
    height: 48,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    paddingHorizontal: 8,
  },
  icon: {
    marginRight: 5,
  },
  placeholderStyle: {
    fontSize: 14,
    color: colors.text,
  },
  selectedTextStyle: {
    fontSize: 16,
    color: "black", //colors.green,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  containerStyle: {
    backgroundColor: colors.background,
    borderRadius: 4,
  },
  itemTextStyle: {
    color: colors.black,
  },
  notFound: {
    height: 48,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    paddingHorizontal: 8,
    backgroundColor: colors.white,
    alignItems: "center",
    justifyContent: "center",
  },
  notFoundText: {
    color: colors.black,
    fontSize: scale(12),
  },
})
